<template>

<div class="rate">
    <div class="item" v-for="i in max" :key="i" :style="{width: size+unit, height: size+unit}">
       <i class="behind icon-take icon-xing" :style="{fontSize: size+unit}"></i>
       <i class="front icon-take icon-xing" v-if="i < frontCount" :style="{fontSize: size+unit}"></i>
       <i class="front icon-take icon-xing" v-if="i === frontCount" :style="{fontSize: size+unit,width: lastWidth}"></i>
    </div>
</div>

</template>
<script>
export default {
  props: {
    max: {typr: Number, default: 5},
    size: {typr: Number, default: '30'},
    unit: {typr: String, default: 'px'},
    score: {typr: Number, default: 4.5}
  },
  computed: {
    frontCount () {
      return Math.ceil(this.score)
    },
    lastWidth () {
      let num = this.score.toFixed(1)
      let i = num.toString().substring(num.indexOf('.') + 1)
      if (i === '0') {
        return this.size + this.unit
      }
      return i / 10 * this.size + this.unit
    }
  }
}
</script>
<style lang='less' scoped>
.rate {
  display: inline-block;
}
  .item {
    position: relative;
    float: left;
    font-size: 0;
  }
    i {
      position: absolute;
    }
    .front {
      overflow: hidden;
      color: #ffbd00;
    }
    .behind {
      color: #ccc;
    }
</style>
